<template>
  <div>
    <span>全选:</span>
    <input v-model="isAll" type="checkbox"/>
    <button @click="reverseFn">反选</button>
    <ul>
      <li v-for="(item,index) in arr" :key="index">
        <input v-model="item.c" type="checkbox"/>
        <span>{{item.name}}</span>
      </li>
    </ul>
  </div>
</template>

<script>
/**
 *  需求1： 小选影响全选
 *  1、静态布局，准备数据 --- 直接预习资料中复制
 *  2、循环渲染默认数据，绑定复选框
 *  3、声明isAll计算属性，并绑定在全选框中
 *  4、在计算属性函数中通过every方法统计小选框的状态值并返回结构
 * 
 *  需求2：全选影响小选
 *  1、改造计算属性，为完整写法（因为用户点击全选框的时候相当于修改计算属性isAll,因此需要使用完整写法）
 *  2、把之前统计小选框状态的代码放到get中并返回，
 *  3、在set函数中通过参数获取的用户设置的全选框的状态值，然后把值同步给小选框的c属性即可
 *  
 *  需求3： 点击反选按钮，让所有小选框状态取反
 *  1、给按钮绑定点击事件，并声明事件处理函数
 *  2、在函数，循环数组，将c属性取反即可
 * 
 */ 
export default {
  data() {
    return {
      arr: [
        {
          name: "猪八戒",
          c: false,
        },
        {
          name: "孙悟空",
          c: false,
        },
        {
          name: "唐僧",
          c: false,
        },
        {
          name: "白龙马",
          c: false,
        },
      ],
    };
  },
  computed:{
    // isAll(){
    //   // every方法使用指定函数检测数组中的所有元素：
    //   //  如果有一个不符合条件，则返回false
    //   // 如果所有条件都满足，则返回true
    //   return this.arr.every(item=>{
    //     return item.c===true
    //   })
    // }
    isAll: {
      set(bool){
        // console.log(63,bool);
        // bool就是全选框的状态值，把状态同步给小选框c属性即可完成功能
        this.arr.forEach(item=>{
          item.c = bool;
        })
      },
      get(){
        return this.arr.every(item=>{
          return item.c===true
        })
      }  
    }
  },
  methods: {
    reverseFn(){
      this.arr.forEach(item=>{
        // !表示取反
        item.c = !item.c
      })
    }
  }
};
</script>